<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>收起/展开群组</title>
  </head>
  <body>
    <div id="tip">双击群组收起/展开</div>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 该案例演示以下功能：
       *  1、双击收起群组；
       *  2、双击展开群组。
       */
      G6.registerNode(
        'circleNode',
        {
          drawShape(cfg, group) {
            const keyShape = group.addShape('circle', {
              attrs: {
                x: 0,
                y: 0,
                r: 30,
                fill: '#87e8de',
              },
            });

            return keyShape;
          },
        },
        'circle',
      );

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        defaultNode: {
          shape: 'circleNode',
        },
        defaultEdge: {
          color: '#bae7ff',
        },
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'collapse-expand-group'],
        },
        groupStyle: {
          default: {
            lineWidth: 2,
            stroke: '#A3B1BF',
            radius: 10,
            lineDash: [5, 5],
            strokeOpacity: 0.9,
            fill: '#F3F9FF',
            fillOpacity: 0.8,
            opacity: 0.8,
          },
          hover: {
            stroke: '#faad14',
            fill: '#ffe58f',
            fillOpacity: 0.3,
            opacity: 0.3,
            lineWidth: 3,
          },
          // 收起状态样式
          collapseStyle: {
            r: 50,
            // lineDash: [ 5, 5 ],
            stroke: '#ffa39e',
            lineWidth: 3,
            fill: '#ffccc7',
          },
        },
      });

      const data = {
        nodes: [
          {
            id: 'node6',
            groupId: 'group3',
            label: 'node6-group3',
            x: 500,
            y: 400,
          },
          {
            id: 'node1',
            label: 'node1-group1',
            groupId: 'group1',
            x: 100,
            y: 100,
          },
          {
            id: 'node9',
            label: 'node9-p1',
            groupId: 'p1',
            x: 300,
            y: 210,
          },
          {
            id: 'node2',
            label: 'node2-group2',
            groupId: 'group1',
            x: 150,
            y: 200,
          },
          {
            id: 'node3',
            label: 'node3-group2',
            groupId: 'group2',
            x: 300,
            y: 100,
          },
          {
            id: 'node7',
            groupId: 'p1',
            label: 'node7-p1',
            x: 200,
            y: 200,
          },
          {
            id: 'node10',
            label: 'node10-p2',
            groupId: 'p2',
            x: 400,
            y: 410,
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
          },
          {
            source: 'node2',
            target: 'node3',
          },
        ],
        groups: [
          {
            id: 'group1',
            title: '1',
            parentId: 'p1',
          },
          {
            id: 'group2',
            title: '2',
            parentId: 'p1',
          },
          {
            id: 'group3',
            title: '2',
            parentId: 'p2',
          },
          {
            id: 'p1',
            title: '3',
          },
          {
            id: 'p2',
            title: '3',
          },
        ],
      };

      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
